<template>
<view>
    <view @click="showAddTask" fixed bottom-50 right-20 v-show="show && !showPopup">
        <image src="/src/static/images/ui/taskadd.png" w-200 h-200 mode="aspectFit" ></image>
    </view>
    <up-popup :show="showPopup" @close="close" @open="open">
        <view center>
            添加任务清单
        </view>
        <view flex flex-col p-2 mt-8>
            <view v-for="(item,index) in taskList.list" :key="index" pb-4>
                <up-input prefixIcon="tags" border="none" color="#21242b" v-model="taskList.list[index]">
                    <template #suffix>
					<up-icon name="close" color="red" @click="handleClose(item)"></up-icon>
				    </template>
                </up-input>
            </view>
            <up-input placeholder="输入任务内容" border="none" color="#84868b" holdKeyboard :focus="true"
            v-model="newtask_value" cursor-spacing="120px" 
            suffixIcon="checkmark" @confirm="handleConfirm"> 
                <template #prefix>
					<up-text
						text="新任务:"
						margin="0 3px 0 0"
						type="primary"
					></up-text>
				</template>
                <template #suffix>
                    <view rounded-full color="primary" :class="dynamicBg" p-1><up-icon name="arrow-upward" color="white" size="20" @click="handleConfirm"></up-icon></view>
				</template>
            </up-input>
            <view py-1><up-line></up-line></view>

            <view v-if="show_title" flex flex-col mt-4>
                <up-input border="none" color="#84868b" clearable v-model="taskList.title" placeholder="捎带一句话">
                    <template #prefix>
                        <up-text text="捎句话:" margin="0 3px 0 0" type="primary"></up-text>
                    </template>
                    <template #suffix>
                        <up-icon name="reload" color="gray" size="30" @click="changeTitle()"></up-icon>
                    </template>
                </up-input>
                <view py-1><up-line></up-line></view>
            </view>
            <view v-if="show_reward" flex flex-col mt-4>
                <up-input border="none" color="#84868b" clearable v-model="taskList.reward" placeholder="给予奖励">
                    <template #prefix>
                        <up-text text="奖励:" margin="0 3px 0 0" type="primary"></up-text>
                    </template>
                </up-input>
                <view py-1><up-line></up-line></view>
                <view inline-flex gap-1><view v-for="item in rewardList"><up-tag :text="item" :name="item" :plain="randomBool()" :type="randomTagType()" @click="handleRewardClick"></up-tag></view></view>
            </view>
            
            <view v-if="show_time" flex flex-row mt-6>
                <up-button @click="show_time_select=true">截止时间:{{ dateFormat(taskList.time) }}</up-button>
                <up-datetime-picker :show="show_time_select"
                    title="设置截止时间"
                            v-model="taskList.time"
                            mode="datetime"
                            placeholder ="请选择截止时间"
                            @confirm="show_time_select = false"
                            @cancel="show_time_select = false"
                        ></up-datetime-picker>

            </view>

            
        </view>
        <view flex flex-row items-end p-2>
            <view flex gap-4 grow>
            <image src="/src/static/images/ui/encourage.png" w-80 h-80 mode="aspectFit" @click="showTitle"></image>
            <image src="/src/static/images/ui/time.png" w-80 h-80 mode="aspectFit" @click="show_time_select=show_time = !show_time"></image>
            <image src="/src/static/images/ui/gift.png" w-80 h-80 mode="aspectFit" @click="showReward"></image>
            </view>
            <view flex gap-4 justify-end>
            <image v-if="taskList.list.length>0" src="/src/static/images/ui/send.png" w-100 h-100 mode="aspectFit" @click="handleSendTask"></image>
        </view>

        </view>
    </up-popup>
</view>
</template>

<script lang="ts" setup>
import { onLoad,onUnload } from '@dcloudio/uni-app'
import { ref,defineProps,reactive,computed } from 'vue'
import { useTaskStore } from '@/stores/task'
import {useTaskListStore} from '@/stores/tasklist'
import { apiAddTask } from '@/api/task'
import { dateFormat } from '@/utils/util'
import {TaskOpEvent} from '@/enums/taskEnums'

interface TaskList{
    title:string,
    time:number,
    setTime:boolean,//是否设置截止时间
    reward:string, 
    list:string[]
}

const show_title = ref(false)
const show_reward = ref(false)
const showPopup = ref(false)
const show_time = ref(false)
const show_time_select = ref(false)
const store = useTaskStore()
const dynamicBg = computed(()=>{
    return newtask_value.value?'bg-blue':'bg-gray'
})
const randomBool = ()=>{
    return Math.random()>0.7
}
const randomTagType = ()=>{
    const cfg = ['primary','success','warning','error']
    return cfg[Math.floor(Math.random()*cfg.length)]
}
const rewardList = reactive<string[]>([])
const taskList:TaskList = reactive({
    title:'',
    time:(new Date()).getTime()+86400000,
    reward:'',
    setTime:false,
    list:[]
})
const showTitle = ()=>{
    show_title.value = !show_title.value
    if(!taskList.title){
        changeTitle()
    }
}

const showReward = ()=>{
   show_reward.value = !show_reward.value
   if(show_reward.value){
        changeRewardTag()
   }
}
const newtask_value = ref('')
defineProps({
    // open:{
    //     type:Boolean,
    //     default:false
    // },
    show:{
        type:Boolean,
        default:true
    }
})
const showAddTask = ()=>{
    showPopup.value = !showPopup.value
}
const close = ()=>{
    showPopup.value = false
}
const open = ()=>{
    showPopup.value = true
}
onLoad(()=>{
    taskList.list.push(...store.taskList)  
    uni.$on(TaskOpEvent.ADD, (res) => {
        open()
    })  
})

onUnload(()=>{
    uni.$off(TaskOpEvent.ADD)
})

const handleConfirm = (value:string)=>{
    if(newtask_value.value=='') return
    value = newtask_value.value
    store.addTask(value)
    taskList.list.push(value)
    newtask_value.value = ''
    }
const handleClose = (item:string)=>{
    taskList.list = taskList.list.filter((i:string)=>i!=item)
    store.delTask(item)
}

const changeTitle = ()=>{

    const titlelist = [
        '别说不，这有一个任务给你',
        '看你闲着，给我找点事做做',
        "清单发你了，按上面的做，别偷懒！",
        "任务清单给你了，照着完成，别漏了！",
        "清单发过去了，一项一项搞定，别拖！",
        "按清单上的做，别问为什么，赶紧的！",
        "清单发你了，照着做，别让我催！",
        "任务给你了，按清单完成，别找借口！",
        "清单发你了，一项也别落下，快点！",
        "按清单做，别磨蹭，做完告诉我！",
        "清单发你了，照着做，别让我等！",
        "任务清单给你了，按上面的完成，别偷懒！",
        "清单发过去了，一项一项搞定，别漏了！",
        "按清单上的做，别问为什么，赶紧的！",
        "清单发你了，照着做，别让我催！",
        "任务给你了，按清单完成，别找借口！",
        "清单发你了，一项也别落下，快点！",
        "按清单做，别磨蹭，做完告诉我！",
        "清单发你了，照着做，别让我等！",
        "任务清单给你了，按上面的完成，别偷懒！",
        "清单发过去了，一项一项搞定，别漏了！",
        "按清单上的做，别问为什么，赶紧的！"];
    taskList.title = titlelist[Math.floor(Math.random()*titlelist.length)]
}

const changeRewardTag = ()=>{
    const cfg = [
        '奖励你一个香吻~',
        '周末给你做最爱的红烧肉',
        '约会全程听你安排',
        '手给你牵5分钟',
        '你今晚的专属抱枕服务',
        '一条小皮筋',
        '允许你捏脸3秒钟',
        '明天早餐我承包了',
        '允许你提一个不过分的小要求',
        '女朋友按摩券一张',
        '带你去吃那家超贵的烤肉',
        '周末睡到自然醒',
        '我的自拍九宫格',
        '允许你今晚熬夜打游戏',
        '今晚我洗碗',
        '奖励你一个额头吻',
        '允许你今晚熬夜打游戏',
    ]
    rewardList.length = 0
    for(let i=0;i<4;i++){
        const index = Math.floor(Math.random()*cfg.length)
        rewardList.push(cfg[index])
        cfg.splice(index,1)
    }
}

const handleRewardClick = (item:any)=>{
    taskList.reward = item
}

// const emit = defineEmits<{
//     (event: TaskOpEvent.ADD, value: TaskList): void
// }>()
const handleSendTask = ()=>{
    handleConfirm("")
    if(taskList.list.length==0){
        uni.$u.toast('请添加任务')
        return
    }
    taskList.setTime = show_time.value
    apiAddTask(taskList).then(res=>{
        const taskListstore = useTaskListStore()
        taskListstore.setItem(res)
        // emit(TaskOpEvent.ADD,res)
        store.clearTask()
        taskList.list = []
        
        close()
        uni.navigateTo({
            url:'/pages/share/share?share='+res.sharecode
        })

    })
}
</script>
<style lang="scss" scoped>
</style>